<template>
  <div class="con">
    <div style="padding-bottom: 20px">
      <!-- <div>目前只有oppo和vivo的收益可以获取</div><br> -->
      <el-button type="primary" @click="add_zhuti()">添加主体</el-button>
      <el-button type="primary" @click="updateData()">提交修改</el-button>
      <el-button type="primary" @click="jisuan()" :loading="loading"
        >获取厂商收益</el-button
      ><span style="font-size: 12px; color: #999; padding-left: 10px"
        >目前只有oppo和vivo的收益可以获取</span
      >
      <div style="color: red">{{ err_msg }}</div>
    </div>

    <el-form ref="dataForm" label-position="right" label-width="100px" style="width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;">
      <div class="fullwidth">
        <div
          v-for="(value, index) of temp"
          :key="index"
          style="
            width: 300px;
            border-right: 1px solid #cacaca;
            margin-right: 10px;
            padding-right: 20px;
            border-right: 1px solid;
            float: left;
          "
        >
          <el-button type="primary" @click="delete_zhuti(index)"
            >删除</el-button
          >
          <el-form-item label="主体">
            <el-input v-model.trim="temp[index].zhuti" placeholder="主体" />
          </el-form-item>
          <el-form-item label="oppo_cookie">
            <el-input
              type="textarea"
              v-model.trim="temp[index].oppo_cookie['cookie']"
              placeholder="oppo的cookie"
            />
            <br />
            <el-input
              type="textarea"
              v-model.trim="temp[index].oppo_cookie['oadstk']"
              placeholder="oppo的oadstk"
            />
          </el-form-item>

          <el-form-item label="vivo_cookie">
            <el-input
              type="textarea"
              v-model.trim="temp[index].vivo_cookie"
              placeholder="vivo_cookie"
            />
          </el-form-item>

          <el-form-item label="xiaomi_cookie">
            <el-input
              type="textarea"
              v-model.trim="temp[index].xiaomi_cookie['cookie']"
              placeholder="xiaomi的cookie"
            />
            <el-input
              type="input"
              v-model.trim="temp[index].xiaomi_cookie['user_id']"
              placeholder="xiaomi的userId"
            />
          </el-form-item>

          <el-form-item label="huawei_cookie">
            <el-input
              type="textarea"
              v-model.trim="temp[index].huawei_cookie"
              placeholder=""
            />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="filter-container" style="padding: 10px 0px">
      <el-select
        v-model="listQuery.pkg_name"
        clearable
        filterable
        style="width: 150px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in optionPackageName"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-select
        v-model="listQuery.brand"
        clearable
        filterable
        style="width: 150px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in optionBrandName"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-date-picker
        v-model="value1"
        type="daterange"
        align="left"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item pickertime"
        format="yyyy-MM-dd"
        value-format="timestamp"
        @change="handleFilter"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-refresh"
        @click="handleCancel"
      >
        重置
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      stripe
      show-summary
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="日期" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.datetime_ }}</span>
        </template>
      </el-table-column>
      <el-table-column label="包名" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.pkg_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="厂商" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.brand }}</span>
        </template>
      </el-table-column>

      <el-table-column label="展现量" prop="show" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.show }}</span>
        </template>
      </el-table-column>

      <el-table-column label="点击量" prop="click" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.click }}</span>
        </template>
      </el-table-column>

      <el-table-column label="点击率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.clickRatio }} %</span>
        </template>
      </el-table-column>

      <el-table-column label="ecpm" align="ecpm">
        <template slot-scope="{ row }">
          <span>{{ row.ecpm }}</span>
        </template>
      </el-table-column>

      <el-table-column label="cpc" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.cpc }}</span>
        </template>
      </el-table-column>

      <el-table-column label="预计盈利" prop="income" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.income }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getList"
    />
    <!-- <pagination v-show="total > 0" layout="prev, pager, next" :small="true" class="pageHidden" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList" /> -->
  </div>
</template>
<script>
import {
  get_manufacturer_config,
  update_manufacturer_config,
  get_manufacturer_earnings,
  manufacturer_earnings_list,
} from "../../api/cnzz/dashboard";
import { MessageBox, Message } from "element-ui";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import {fz_pkgs} from '@/utils/index'
export default {
  components: { Pagination },
  data() {
    return {
      temp: [],
      loading: false,
      rules: {},
      err_msg: "",
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 20,
        brand: "",
        pkg_name: "",
        time_start: "",
        time_end: "",
        is_fuzhou: '1'
      },
      value1: "",
      optionPackageName: [],
      optionBrandName: [
        { label: "全部厂商", key: "" },
        { label: "oppo", key: "oppo" },
        { label: "vivo", key: "vivo" },
        { label: "小米", key: "xiaomi" },
        { label: "华为", key: "huawei" },
      ],
    };
  },
  created() {
    this.listformat();
    this.getData();
    this.getList();
  },
  methods: {
    listformat(){
      var l = [{ label: "所有包", key: "" }]
      for(let i=0; i < fz_pkgs.length; i++){
        if (fz_pkgs[i].key == ''){
          l.push({ label: fz_pkgs[i].label, key: ''})
        } else{
          l.push({ label: fz_pkgs[i].label, key: fz_pkgs[i].label })
        }
      }
      this.optionPackageName = l
    },
    getData() {
      get_manufacturer_config({is_fuzhou: '1'}).then((res) => {
        this.temp = JSON.parse(res.DATA);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCancel() {
      this.value1 = "";
      this.listQuery.page = 1;
      this.listQuery.pkg_name = "";
      this.listQuery.brand = "";
      this.listQuery.type = 1;
      this.getList();
    },
    //获取列表
    getList() {
      this.listLoading = true;
      if (this.value1) {
        this.listQuery.time_start = this.value1[0] / 1000;
        this.listQuery.time_end = this.value1[1] / 1000;
      } else {
        this.listQuery.time_start = "";
        this.listQuery.time_end = "";
      }

      manufacturer_earnings_list(this.listQuery).then((response) => {
        this.list = response.DATA.list;
        this.total = response.DATA.total;
        this.listLoading = false;
      });
      this.listLoading = false;
    },
    delete_zhuti(index) {
      this.temp.splice(index, 1);
    },
    add_zhuti() {
      this.temp.push({
        zhuti: "",
        oppo_cookie: {
          cookie: "",
          oadstk: "",
        },
        vivo_cookie: "",
        xiaomi_cookie: {
          cookie: "",
          user_id: "",
        },
        huawei_cookie: "",
      });
    },
    updateData() {
      update_manufacturer_config({
        is_fuzhou:'1',
        manufacturer_config: JSON.stringify(this.temp),
      }).then((res) => {
        if (res.STATUS == 200) {
          Message({
            message: "修改成功",
            type: "success",
            duration: 2000,
          });
        } else {
          Message({
            message: res.DEC,
            type: "success",
            duration: 2000,
          });
        }
      });
    },
    jisuan() {
      MessageBox("获取厂商收益, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.err_msg = "";
          get_manufacturer_earnings({is_fuzhou: '1'})
            .then((res) => {
              if (res.STATUS == 200) {
                if (res.DEC == "success") {
                  this.getList();
                  Message({
                    type: "success",
                    message: "生成成功!",
                  });
                } else {
                  this.err_msg = "error_msg：" + res.DEC;
                }

                this.loading = false;
              } else {
                this.loading = false;
              }
            })
            .catch((res) => {});
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.con {
  padding: 20px;
}
.fullwidth {
  /* display: flex; */
    justify-content: flex-start;
    overflow-y: auto;
    display: inline-flex;
    display: -ms-inline-flex;
display: -webkit-inline-flex;
 display: -webkit-box;
}
</style>